<template>
  <div :style="{width: this.pcMobile == 1 ? '370px' : '370px'}" style="padding-left: 5px">
    <div style="display: flex;justify-content: space-between;font-weight: 600;z-index:999">
      <div>{{ echartsData.name }}</div>
      <div v-if="isMore" @click="dialogTableClick" style="cursor: pointer;color: #E6A23C">更多</div>
    </div>
<!--    <div style="margin-bottom: -35px">标题</div>-->
    <div :id="echartsId" :style="{width: this.pcMobile == 1 ? '370px' : '370px'}"
         style="height:350px;margin-top: -10px"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import {getStore} from '@/util/store'

export default {
  props: {
    echartsId: {
      type: String,
      default: ''
    },
    echartsType: {
      type: String,
      default: 'line'
    },
    echartsData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    yAxisFormatter: {
      type: Boolean,
      default: false
    },
    isMore: {
      type: Boolean,
      default: false
    },
    isClick:{
      type: Boolean,
      default: false
    },

  },
  data() {
    return {
      pcMobile: '1', // 1 PC端，2 移动端
      option: {
        // title: {
        //   text: ''
        // },
        grid: {
          top: '25%',//距上边距
          // left:'25%',//距离左边距
          // right:'25%',//距离右边距
          bottom:'37%',//距离下边距

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '30px',
          x: 'left',
          data: []
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: 50 //倾斜角度
            //rotate: -50 向右转
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
        },
        dataZoom: [{  //添加dataZoom属性即可显示滑动条
          type: 'inside',
          show: true, //flase直接隐藏图形
          xAxisIndex: [0],
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标移动能否触发平移
          moveOnMouseMove: true,
          // 鼠标滚轮能否触发平移
          moveOnMouseWheel: false,
          // left: '9%', //滚动条靠左侧的百分比
          // bottom: -5,
          // start: 0,//滚动条的起始位置
          // end: 15, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          // startValue: this.echartsData.xAxisData - 9, // 展示后10个数据的索引
        }],
        series: [
          {
            name: '',
            data: [820, 932, 901, 934, 1290, 1330, 120],
            type: 'line',
            smooth: true,
            // barWidth: '20px',
            itemStyle: {
              color: '#0DBF8D'
            },
            label: {
              show: false,
              position: 'top',
              valueAnimation: true
            },
          },

        ]
      }
    }
  },
  mounted() {
    this.isMobile()
  },
  methods: {
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      // 1 PC端，2 移动端
      this.pcMobile = flag ? '2' : '1'
      this.getData()
    },
    getParams() {
      // 0:省教育局， 1：市教育局，2：县教育局，3：校长 4：年级组长 5：班主任
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {}
      if (this.type == 0) {
        params.provinceCode = newUserInfo.provinceCode
      } else if (this.type == 1) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
      } else if (this.type == 2) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
      } else if (this.type == 3) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
        params.xxId = newUserInfo.xxId
      } else if (this.type == 4) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
        params.xxId = newUserInfo.xxId
        params.njId = newUserInfo.njId
      } else if (this.type == 5) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
        params.xxId = newUserInfo.xxId
        params.njId = newUserInfo.njId
        params.bjId = newUserInfo.bjId
      }
      return params
    },
    dialogTableClick(){
      console.log('111111111222')
      this.$emit('dialogTableClick')
    },
    getData() {
      //获取echarts对象
      let myChart = echarts.init(document.getElementById(this.echartsId));
      console.log('this.echartsData', this.echartsData)
      this.option.xAxis.data = this.echartsData.xAxisData
      if (this.yAxisFormatter) {
        this.option.yAxis = {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        }
      }
      this.option.series[0].data = this.echartsData.seriesData
      // this.option.title.text = this.echartsData.name
      this.option.legend.data = this.echartsData.legendData
      this.option.series[0].name = this.echartsData.legendData[0]
      this.option.series[0].type = this.echartsType
      this.option.series[0].label.show = this.echartsType == 'line' ? false : true
      if(this.isClick){
        myChart.on("click", (params) => {
          console.log('params',params)
          let id = this.echartsData.idArr[params.dataIndex]
          this.$router.push({ path: "/templateManage/principal",query: {type:'0',code:id} });
          console.log('id', id)
          // console.log("🚀 ~ file: index.vue:621 ~ this.nxMap.on ~ params:", params)
          //这个是因为地图上有柱状图，点击柱状图也会触发点击事件，所以需要判断一下

        });
      }


      myChart.setOption(this.option);
    }
  }

}
</script>

<style scoped>

</style>
